// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
// 引入默认图片
import defaltImg from '@/assets/images/200.png'
export default {
  install (app) {
    // console.log('打印app实例', app)
    app.directive('imgLazy', {
      mounted (el, binding) {
        console.log(binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.addEventListener('error', () => {
                el.src = defaltImg
              })
              el.src = binding.value
              stop()
            }
          },
          {
            //   threshold  表示视口到达什么地方开始执行 0 - 1 直接 1表示整个内容全部都到视口中才执行 0 最小
            threshold: 0.1
          }

        )
      }
    })
  }
}
